<template>
    <el-form ref="formRef" :model="form" labelWidth="120px" label-suffix="：">
        <el-steps :active="active">
            <template v-for="(step, index) in steps" :key="index">
                <el-step>
                    <template #title>
                        <span class="step-title" @click="active = step.value">{{ step.title }}</span>
                    </template>
                </el-step>
            </template>
        </el-steps>

        <div v-show="active === 1" class="step1">
            <el-form-item label="节点名称">
                <el-input v-model="form.nodeName"></el-input>
            </el-form-item>
            <el-form-item label="节点ID">
                <el-input v-model="form.typeConcatName" disabled></el-input>
            </el-form-item>
            <el-form-item label="类型">
                <el-radio-group v-model="form.FTP_TYPE">
                    <el-radio value="FTP">FTP</el-radio>
                    <el-radio value="SFTP">SFTP</el-radio>
                </el-radio-group>
            </el-form-item>
            <el-form-item label="数据源" prop="datasourceId">
                <el-select v-model="form.datasourceId" @change="dsChange" filterable style="width: 100%"
                           :loading="loading">
                    <el-option
                        v-for="item in dsList" :key="item.datasourceId"
                        :label="item.datasourceGroup + '_' + item.datasourceName + '_' + item.datasourceType"
                        :value="item.datasourceId"/>
                </el-select>
            </el-form-item>
            <el-form-item label="备注">
                <el-input v-model="form.description" type="textarea" placeholder="请输入内容"/>
            </el-form-item>
            <dialog-footer @cancel="cancel" @ok="submitForm" ok-text="保存">
                <el-button type="success" @click="active = 2">下一步</el-button>
            </dialog-footer>
        </div>

        <div v-show="active === 2" class="step2">
            <el-form-item label="文件路径">
                <el-input v-model="form.FILE_PATH"/>
            </el-form-item>
            <el-form-item label="文件编码">
                <el-select v-model="form.FILE_CODE">
                  <el-option v-for="item in fileEncodingList" :key="item" :label="item" :value="item"/>
                </el-select>
            </el-form-item>
            <el-form-item label="文件分隔符">
                <el-input v-model="form.DELIMITER"/>
            </el-form-item>
            <el-form-item label="文件后缀名">
                <el-input v-model="form.FILE_SUFFIX"/>
            </el-form-item>
            <el-form-item label="跳过首行">
                <el-radio-group v-model="form.SKIP_HEADER">
                    <el-radio label="Y">是</el-radio>
                    <el-radio label="N">否</el-radio>
                </el-radio-group>
            </el-form-item>
            <dialog-footer @ok="submitForm" @cancel="cancel" ok-text="保存">
                <el-button type="success" @click="active = 1">上一步</el-button>
                <el-button type="success" @click="active = 3">下一步</el-button>
            </dialog-footer>
        </div>

        <div v-show="active === 3" class="step3">
            <el-form-item label="字段">
                <div style="margin-bottom: 10px;">
                    <el-button
                        type="primary"
                        size="small"
                        @click="addField"
                    >新增字段</el-button>
                    <el-button
                        type="danger"
                        size="small"
                        @click="batchDelete"
                        :disabled="selectedRows.length === 0"
                    >删除选中</el-button>

                </div>
                <el-table :data="form.fields.field" style="width: 100%" @selection-change="handleSelectionChange">
                    <el-table-column type="selection" width="30"/>
                    <el-table-column prop="index" label="序号" width="50" header-align="center" align="center">
                        <template #default="scope">
                            {{ scope.$index + 1 }}
                        </template>
                    </el-table-column>
                    <el-table-column prop="name" label="字段名称" width="150">
                        <template #default="scope">
                            <el-input v-model="scope.row.name" placeholder="请输入字段名称"></el-input>
                        </template>
                    </el-table-column>
                    <el-table-column prop="type" label="字段类型" width="180">
                        <template #default="scope">
                            <el-select v-model="scope.row.type" placeholder="请选择字段类型">
                                <el-option v-model="scope.row.type"
                                           v-for="item in typeList"
                                           :key="item.dictLabel"
                                           :label="item.dictLabel"
                                           :value="item.dictLabel"/>
                            </el-select>
                        </template>
                    </el-table-column>
                    <el-table-column label="操作" width="120">
                        <template #default="scope">
                            <el-button
                                type="danger"
                                size="small"
                                @click="deleteField(scope.$index)"
                            >删除</el-button>
                        </template>
                    </el-table-column>
                </el-table>
            </el-form-item>
            <dialog-footer @ok="submitForm" @cancel="cancel" ok-text="保存">
                <el-button type="success" @click="active = 2">上一步</el-button>
            </dialog-footer>
        </div>




    </el-form>

</template>

<script setup>
import {defineComponent, ref, onMounted, reactive, watch} from 'vue';
import {flowServiceStore} from '@data/store/flow';

const flowCount = flowServiceStore();
import {storeToRefs} from 'pinia';
import {search as datasourceList} from '@data/api/data/datasource'
import {ElMessage} from "element-plus";
import { getDicts } from '@base/api/base/dict/data'

const {flowData} = storeToRefs(flowCount);

defineComponent({
    name: 'FTPTextInput',
});

const steps = ref([
    { value: 1, title: '基本属性' },
    { value: 2, title: '输入参数' },
    { value: 3, title: '输入字段' },
]);
const active = ref(1);

const dsList = ref([]);
const loading = ref(false);

const typeList = ref([]);
const getTypeList= () => {
    getDicts('ktr_field_type').then((response) => {
        typeList.value = response.data
        console.log(typeList.value)
    })
};

const props = defineProps({
    detailObject: {
        type: Object,
        default: () => {
        },
    },
})

const form = reactive({
    nodeName: '',
    name: '',
    type: 'FTPTextInput',
    distribute: 'Y',
    copies: 1,
    FTP_TYPE: '',
    description: '',
    datasourceId: '',
    FTP_HOST: '',
    FTP_PORT: '',
    FTP_USER: '',
    FTP_PASSWORD: '',


    FILE_PATH: '',
    FILE_CODE: '',
    DELIMITER: '',
    FILE_SUFFIX: '',
    SKIP_HEADER: '',

    fields: {
        field: []
    },

    GUI: {
        xloc: 1,
        yloc: 1,
        draw: 'Y'
    }
});


const emit = defineEmits(['cancel']);

onMounted(() => {
    getJdbcDs();
    getTypeList();
    form.nodeName = flowData.value[props.detailObject.id]?.nodeName || props.detailObject.data.label;
    form.name = props.detailObject.id;
    form.typeConcatName = `${props.detailObject.id}(${form.type}-${props.detailObject.id})`;
    form.FTP_TYPE = flowData.value[props.detailObject.id]?.FTP_TYPE || 'FTP';
    form.datasourceId = flowData.value[props.detailObject.id]?.datasourceId || '';
    form.description = flowData.value[props.detailObject.id]?.description || '';
    form.FTP_HOST = flowData.value[props.detailObject.id]?.FTP_HOST || '';
    form.FTP_PORT = flowData.value[props.detailObject.id]?.FTP_PORT || '';
    form.FTP_USER = flowData.value[props.detailObject.id]?.FTP_USER || '';
    form.FTP_PASSWORD = flowData.value[props.detailObject.id]?.FTP_PASSWORD || '';

    form.FILE_PATH = flowData.value[props.detailObject.id]?.FILE_PATH || '';
    form.FILE_CODE = flowData.value[props.detailObject.id]?.FILE_CODE || '';
    form.FILE_SUFFIX = flowData.value[props.detailObject.id]?.FILE_SUFFIX || '';
    form.DELIMITER = flowData.value[props.detailObject.id]?.DELIMITER || '';
    form.SKIP_HEADER = flowData.value[props.detailObject.id]?.SKIP_HEADER || 'N';

    form.fields.field = flowData.value[props.detailObject.id]?.fields?.field || [
        {
            name: 'field_1',
            type: 'String'
        },
    ];

    form.distribute = flowData.value[props.detailObject.id]?.distribute || 'Y';
})

const dsChange = (e) => {
    // 清空
    form.table = '';
    dsList.value.find((item) => {
        if (item.datasourceId === e) {
            form.FTP_HOST = item.dbHost;
            form.FTP_PORT = item.dbPort;
            form.FTP_USER = item.jdbcUsername;
            form.FTP_PASSWORD = item.jdbcPassword;
        }
    })
}
const fileEncodingList = ref(['UTF-8','GBK']);
const getJdbcDs = () => {
    loading.value = true
    datasourceList({}).then(response => {
        const {list} = response.data
        dsList.value = list.filter(item => item.datasourceType === 'ftp')
        loading.value = false
    })
}

const selectedRows = ref([])
// 处理选择变化
const handleSelectionChange = (val) => {
    selectedRows.value = val
}
// 批量删除方法
const batchDelete = () => {
    console.log(selectedRows.value)
    if (selectedRows.value.length === 0) return
    const indexes = selectedRows.value.map(row =>
        form.fields.field.indexOf(row)
    ).sort((a,b) => b - a)
    indexes.forEach(index => {
        form.fields.field.splice(index, 1)
    })
    selectedRows.value = []
}

// 新增字段方法
const addField = () => {
    const nextIndex = form.fields.field.length + 1
    form.fields.field.push({
        name: `field_${nextIndex}`,
        type: 'String',
    });
}
// 修改删除方法
const deleteField = (index) => {
    form.fields.field.splice(index, 1);
}

const submitForm = () => {
    form.fields.field.forEach(fieldItem => {
      form.fieldList.push(fieldItem);
    });
    flowCount.setFlowData(
        {
            ...flowData.value,
            [props.detailObject.id]: {
              ...form,
              name: `${form.type}-${form.name}`,
            }
        }
    )
    // 触发数据更新事件
    // emit('update-data', {
    //   id: props.detailObject.id,
    //   data: form
    // });
    console.log("flowData",flowData.value);
    emit('cancel');
}
const cancel = () => {
    emit('cancel');
}

const toReader = () => {

}

const parseSql = () => {
}

</script>

<style>

</style>